<script setup lang="ts">
  import { HMessage, HMessageBox } from '@/components/common/message'
  import useCheckFlowTemplateFormService from '@/services/pages/base-info/useCheckFlowTemplateFormService'
  import { FormInstance } from 'element-plus'
  import { ref, watch } from 'vue'
  import moment from 'moment'
  import useCheckFlowTemplateDetailService from '@/services/pages/base-info/useCheckFlowTemplateDetailService'

  const { checkFlowTemplateDetail, getCheckFlowTemplateDetailLoading, getCheckFlowTemplateDetail } =
    useCheckFlowTemplateDetailService()
  const {
    checkFlowTemplateForm,
    checkFlowTemplateFormSaveLoading,
    checkFlowTemplateFormSave,
    resetCheckFlowTemplateForm,
  } = useCheckFlowTemplateFormService()

  defineOptions({
    name: 'CheckFlowTemplateFormModal',
  })

  const emits = defineEmits<{
    (e: 'update'): void
    (e: 'close'): void
  }>()

  const props = defineProps({
    templateId: {
      type: String,
      default: () => '',
    },
  })

  const visible = defineModel<boolean>('modelValue', { default: false })
  const formInstance = ref<FormInstance | null>(null)
  const rules = {
    code: [{ required: true, message: '请输入模板编码', trigger: ['change', 'blur'] }],
    name: [{ required: true, message: '请输入模板名称', trigger: ['change', 'blur'] }],
    description: [{ required: true, message: '请输入模板描述', trigger: ['change', 'blur'] }],
  }

  const hideDialog = () => {
    resetCheckFlowTemplateForm()
    visible.value = false
    emits('close')
  }

  const onConfirmClick = async () => {
    try {
      if (!formInstance.value) return
      await formInstance.value.validate()
      checkFlowTemplateForm.value.gmtCreate = moment().format('YYYY-MM-DD HH:mm:ss')
      checkFlowTemplateForm.value.gmtUpdate = moment().format('YYYY-MM-DD HH:mm:ss')
      const res = await checkFlowTemplateFormSave(props.templateId)
      if (res) {
        if (res.code === 20000) {
          HMessage.success('操作成功')
          hideDialog()
          emits('update')
          return
        }

        HMessageBox.error(res.message)
        return
      }

      HMessageBox.error('保存失败，请稍后重试')
    } catch (error) {
      // error
    }
  }

  watch(visible, async (value) => {
    if (value && props.templateId) {
      await getCheckFlowTemplateDetail(props.templateId)
      checkFlowTemplateForm.value = { ...checkFlowTemplateDetail.value, id: props.templateId }
    }
  })
</script>

<template>
  <h-dialog
    v-model="visible"
    :loading="checkFlowTemplateFormSaveLoading || getCheckFlowTemplateDetailLoading"
    @close="hideDialog"
  >
    <el-form
      ref="formInstance"
      :model="checkFlowTemplateForm"
      class="modal_form_content"
      inline-message
      label-position="top"
      :rules="rules"
    >
      <el-form-item label="模板编码" prop="code">
        <el-input v-model.trim="checkFlowTemplateForm.code" placeholder="请输入模板编码" />
      </el-form-item>
      <el-form-item label="模板名称" prop="name">
        <el-input v-model.trim="checkFlowTemplateForm.name" placeholder="请输入模板名称" />
      </el-form-item>
      <el-form-item label="模板描述" prop="description">
        <el-input
          v-model.trim="checkFlowTemplateForm.description"
          placeholder="请输入模板描述"
          type="textarea"
          maxlength="200"
          show-word-limit
          :rows="5"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <h-button is-modal type="primary" @click="onConfirmClick">确定</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>
